<template>
<!-- /**
Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。
 */ -->
  <el-container>
    <el-header>
      <div class="left-box">
        <img src="../assets/imger/shop.png" alt="" />
        <div>电商后台管理系统</div>
      </div>
      <div class="rigth-box">
        <div>欢迎 : {{ userInfo.data.username }}</div>
        <div id="getout" @click="goOut">退出</div>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏结构 -->
      <el-aside width="200px">
        <!-- NavMenu组件 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#91C7AE"
          unique-opened  
          router
        >
         <!-- unique-opened属性 同一时间只能打开一个菜单 -->
          <el-submenu :index="String(item.id)" v-for="item in menuList" :key='item.id'>
            <template slot="title">
              <i :class="iconList[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item 
            :index='"/"+value.path' 
            v-for="value in item.children" 
            :key="value.id"
            >
             <i class="el-icon-menu"></i>
            {{ value.authName}}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 二级路由的出口 -->
          <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      userInfo: null,
      menuList: [],
      iconList:{
          '201': 'el-icon-s-home',
          '125': 'el-icon-s-custom',
          '103': 'el-icon-setting',
          '101': 'el-icon-goods',
          '102': 'el-icon-date'
      }
    };
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.getMenuList();
  },
  methods: {
    //改方法是elementui中massageBox组件中提供的点击确定方法
    goOut() {
      this.$confirm("您确定要退出吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //用户点击确定按钮进入
          sessionStorage.clear();
          this.$router.push("/login");
        })
        .catch(() => {
          //用户点击取消按钮时进入
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    //获取左菜单数据
    async getMenuList(){
       const {data:res}  = await this.$http.get('menus')
    //    console.log(res)
        if(res.meta.status !==200){
            return this.$message.error(res.meta.msg);  //elementui提供的方法
        }
        this.menuList = res.data;
        // console.log(this.menuList)
    }
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  .el-header {
    background-color: #27AE60;
    height: 44px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-box {
      width: 300px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color:rgb(52, 52, 53);
      img {
        width: 36px;
        height: 36px;
        margin: 4px 10px;
      }
    }
    .rigth-box {
      width: 200px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgb(117, 117, 122);
      margin-right: 20px;
      div {
        margin-left: 20px;
      }
      #getout:hover {
        font-size: 20px;
        color: skyblue;
        cursor: pointer;
      }
    }
  }
}
.el-menu{
    height: 100%;
}
.el-main{
    background-color: #f4f8f8;
}
</style>